<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Sample Connect Rectangles</title>
	<script language="javascript" type="text/javascript" src="js/kinetic-v3.4.4.js"></script>

    <script>
    	var initX = 200;
    	var initY = 200;
		var rectW = 100;
		var rectH = 50;
		var stt=0;
		var BLine=-1;
	//	var ELine=-1;
		var Box = Array();
		var CountConnect = Array();
		var Connect = Array();
        function writeMessage(stage, message){
            var context = stage.getContext();
            stage.clear();
            context.font = "18pt Calibri";
            context.fillStyle = "black";
            context.fillText(message, 10, 25);
        }
		
		function drawLine(stage,x1,y1,x2,y2){
			var onesecondX= (x1+x2)/2;
			var onesecondY=  (y1+y2)/2;
			var onefourthX= (x1+onesecondX)/2;
			var onefourthY= (y1+onesecondY)/2;
		
			var threefourthX=(x2+onesecondX)/2;
			var threefourthY=(y2+onesecondY)/2;
			
             var context = stage.getContext();
                context.beginPath();
				context.moveTo(x1,y1);
				context.lineTo(onefourthX,onefourthY);
				context.lineWidth = 7;
				context.stroke();
				context.closePath();
				
				context.beginPath();
				context.moveTo(onefourthX,onefourthY);
				context.lineTo(onesecondX,onesecondY);
				context.lineWidth = 5;
				context.stroke();
				context.closePath();
				
				context.beginPath();
				context.moveTo(onesecondX,onesecondY);
				context.lineTo(threefourthX,threefourthY);
				context.lineWidth = 3;
				context.stroke();
				context.closePath();
				
				context.beginPath();
				context.moveTo(threefourthX,threefourthY);
				context.lineTo(x2,y2);
				context.lineWidth = 1;
				context.stroke();
				context.closePath();
        }
		
		function getX(box){
			return initX + box.getX();
       }
		
		function getY(box){
			return initY + box.getY();
       }
		
		function clearAll(){
			stt=0;
			BLine=-1;
       }
		
		function update(stage){
			stage.clear();
			for(var i=0;i<stt;i++)
			{
				var BBox=Box[i];
				var count=CountConnect[i];
				for (var j=0;j<count;j++)
				{
					var EBox=Box[Connect[i][j]];
					drawLine(stage,getX(BBox)+50,getY(BBox)+25,getX(EBox)+50,getY(EBox)+25);
				}
			}
		}
		
		function connected(b1, b2){
			for(var i=0;i<CountConnect[b1];i++)
			{
				if(Connect[b1][i]==b2)
					return true;
			}
			for(var j=0;j<CountConnect[b2];j++)
			{
				if(Connect[b2][j]==b1)
					return true;
			}
			return false;
		}
		
		function removeConnect(b1, b2){
			for(var i=0;i<CountConnect[b1];i++)
			{
				if(Connect[b1][i]==b2)
				{
					CountConnect[b1]--;
					for(var n=i;n<CountConnect[b1];n++)
					{
						Connect[b1][n]=Connect[b1][n+1];
					}
					
					return;
				}
			}
			for(var j=0;j<CountConnect[b2];j++)
			{
				if(Connect[b2][j]==b1)
				{
					CountConnect[b2]--;
					for(var m=j;m<CountConnect[b2];m++)
					{
						Connect[b2][m]=Connect[b2][m+1];
					}
					
					return;
				}
			}
		
		}
		
		function removeBox(stage,index){
			var i;
			for(i=0;i<stt;i++)
			{
				if(connected(index,i))
				{
					removeConnect(index,i);
				}
			}
			
			stage.remove(Box[index]);
			
// 			stt--;
// 			for(i=index;i<stt;i++)
// 			{
// 				Box[i]=Box[i+1];
// 			}
			stage.draw();
		}
		function addBox(stage){
			var index= stt;
            var box = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.beginPath();
                context.rect(initX , initY , rectW, rectH);
                context.lineWidth = 4;
                context.strokeStyle = "black";
                context.fillStyle = "#00D2FF";
				context.moveTo(initX+80,initY);
				context.lineTo(initX+80,initY+50);
				context.moveTo(initX+80,initY+20);
				context.lineTo(initX+100,initY+20);
                context.fill();
                context.stroke();
				context.font = "18pt Calibri";
				context.fillStyle = "black";
				context.fillText("box "+(index+1), initX+5, initY+35);
				context.font = "15pt Calibri";
				context.fillStyle = "red";
				context.fillText("x", initX+85, initY+15);
				context.font = "15pt Calibri";
				context.fillStyle = "blue";
				context.fillText("+", initX+85, initY+40);
                context.closePath();
            });
			stt++;
			Box[index]=box;
			CountConnect[index]=0;
			Connect[index]=new Array();
			box.draggable(true);
		
			box.on("click", function(){
			
				if(stage.getMousePos().x-getX(box)>80 && stage.getMousePos().y-getY(box)>20 )
				{
					if(BLine==-1)
					{
						BLine=index;
					}
					else 
					{
						if(!connected(BLine,index))
						{
							Connect[BLine][CountConnect[BLine]]=index;
							CountConnect[BLine]++;
	
						}
						else
						{
						removeConnect(BLine,index);
						}
						BLine=-1;
					}
				}
				if(stage.getMousePos().x-getX(box)>80 && stage.getMousePos().y-getY(box)<20 )
				{
					
					removeBox(stage,index);
				}

			});
			box.on("dragstart", function(){
				
            });
			box.on("dragmove", function(){
				update(stage);
		
            });
            box.on("dragend", function(){
				update(stage);
            });
			stage.add(box);
		
			
        }
 
        window.onload = function(){
            var stage = new Kinetic.Stage("container", 1400, 768);
            var canvas = stage.getCanvas();
			
            var AddRectMenu = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.beginPath();
                context.rect(0, 0, 80, 20);
                context.lineWidth = 4;
                context.strokeStyle = "black";
                context.fillStyle = "#94d77f";
				context.fill();
                context.stroke();
				context.font = "15pt Calibri";
				context.fillStyle = "black";
				context.fillText("Add Box", 5, 15);
                context.closePath();
            });
		
            var ClearMenu = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.beginPath();
                context.rect(90, 0, 80, 20);
                context.lineWidth = 4;
                context.strokeStyle = "black";
                context.fillStyle = "#94d77f";
				context.fill();
                context.stroke();
				context.font = "15pt Calibri";
				context.fillStyle = "black";
				context.fillText("Clear", 110, 15);
                context.closePath();
            });
						
            AddRectMenu.on("click", function(){
				addBox(stage);
				
            });
            
            ClearMenu.on("click", function(){
				for(var i=0;i<stt;i++)
				{
					removeBox(stage,i);
				}
				stt=0;
				BLine=-1;
				stage.clear();
				stage.draw();
				
				
            });
 
            // write out drag and drop events
           
            stage.add(AddRectMenu);
            stage.add(ClearMenu);
			
        };
    </script>
</head>
<body onmousedown="return false;">
	drag to move rects. click X to delete rects. click + on 2 rect to connect/disconnect.
    <div id="container" style="border: 1px solid orange;">
    </div>
</body>
</html>